<template>
	<view class="jx-task" v-if="item !== null" @tap="goto('/pages/my-task-detail')">
		<view class="flex j-between a-center">
			<view class="flex a-center">
				<u-icon name="clock" size="32" color="#246FDD"></u-icon>
				<view class="time">2021-09-21 23:02</view>
			</view>
			<view class="status">
				<view style="color: #2979FF;" v-if="item.status === 1">待完成</view>
				<view style="color: #2979FF;" v-if="item.status === 2">审核中</view>
				<view style="color: #DD2424;" v-if="item.status === 3">未通过</view>
				<view style="color: #00D86A;" v-if="item.status === 4">已完成</view>
				<view style="color: #999999;" v-if="item.status === 5">已过期</view>
			</view>
		</view>
		<view class="split">
			<u-line length="654" color="#f2f2f2"></u-line>
		</view>
		<view class="flex a-center j-between">
			<view class="rela t-pic">
				<image class="image" :src="item.src"></image>
				<view class="is-top abso flex j-center a-center" v-if="item.top">
					<view>置顶</view>
				</view>
			</view>
			<view class="ctt">
				<view class="flex j-between a-center">
					<view class="name ecllipse">{{item.name}}</view>
					<view class="flex a-center">
						<view class="coin">
							<image class="image" src="../../static/icon/idx/idx(7).png"></image>
						</view>
						<view class="c-name">{{item.coin}}</view>
					</view>
				</view>
				<view class="flex j-center a-center t-name">
					<view>互砍任务</view>
				</view>
				<view class="statics">
					<view class="flex j-between a-center" v-if="item.status === 1 || item.status === 2">
						<view>已完成：{{item.wc}}</view>
						<view>剩余：{{item.sy}}</view>
					</view>
				</view>
				<view class="flex j-end submits">
					<view class="submit flex j-center a-center" v-if="item.status === 1">
						<view>提交任务</view>
					</view>
					<view class="submit flex j-center a-center" v-if="item.status === 3">
						<view>申请仲裁</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	props:{
		item:{
			type:Object,
			default:null
		}
	}
}
</script>

<style lang="scss" scoped>
.jx-task{border-radius: 16rpx;background-color: #FFF;padding: 32rpx 24rpx;margin-bottom: 24rpx;color: #333;
	.time{margin-left: 24rpx;}
	.split{margin: 24rpx 0;}
	.ctt{width:430rpx}
	.t-pic{width: 200rpx;height: 200rpx;border-radius: 16rpx;overflow: hidden;
		.is-top{color:#FFF;background-color: rgba(0, 0, 0, .5);width: 96rpx;height: 32rpx;border-radius: 16rpx 0rpx 16rpx 0px;
			left: 0;top:0;z-index: 9;font-size: 20rpx;
		}
	}
	.name,.c-name{font-size: 32rpx;color: #333;}
	.name{width:350rpx;}
	.coin{width: 36rpx;height: 36rpx;margin-right: 8rpx;}
	.t-name{width: 128rpx;height: 32rpx;border-radius: 20rpx;background-color: #f2f2f2;color: #999;font-size: 20rpx;
		margin-top: 16rpx;
	}
	.statics{color:#999;font-size: 24rpx;width: 220rpx;margin-top: 20rpx;height: 34rpx;}
	.submits{height: 64rpx;}
	.submit{width: 192rpx;height: 64rpx;border-radius: 16rpx;color: #FFF;font-size: 28rpx;background-color: #246FDD;}
}
</style>
